<template>
  <div class="home-container">
    <!-- 顶部导航栏组件 -->
    <van-nav-bar class="page-nav-bar" fixed z-index="999">
      <van-button class="search-btn" slot="title" type="info" size="small" round icon="search">搜索</van-button>
    </van-nav-bar>

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="banner01" />
      <van-swipe-item class="banner02" />
      <van-swipe-item class="banner03" />
      <van-swipe-item class="banner04" />
    </van-swipe>

    <van-grid :column-num="3" :gutter="10">
      <van-grid-item icon="photo-o" to="/commerce" text="入驻商务部" />
      <van-grid-item icon="photo-o" to="/job-wanted" text="家政求职" />
      <van-grid-item icon="photo-o" to="/service" text="家庭服务" />
      <van-grid-item icon="photo-o" text="线上家政培训" />
      <van-grid-item icon="photo-o" text="线上家政保险" />
      <van-grid-item icon="photo-o" to="/standard" text="家政服务标准" />
    </van-grid>

    <van-grid class="nav" :column-num="4" :gutter="10">
      <van-grid-item v-for="item in Company.occupation" :key="item.id" to="/staff">
        <div class="item"><van-icon :name="item.icon" /></div>
        <span class="text">{{ item.name }}</span>
      </van-grid-item>
    </van-grid>

    <div class="company-info-wrap">
      <van-cell title="湖南征信认证家服公司" icon="home-o" />
      <company-info v-for="item in companys" :key="item.id" :companys="item" />
      <van-cell class="text" @click="$router.push('/company')">
        <van-row type="flex" justify="center" align="center">更多公司 <van-icon name="arrow" /></van-row>
      </van-cell>
    </div>

    <div class="staff-info-wrap">
      <van-cell title="诚信注册家服员" icon="user-o" />
      <staff-info v-for="item in staffs" :key="item.id" :staffs="item" />
      <van-cell class="text" @click="$router.push('/staff')">
        <van-row type="flex" justify="center" align="center">更多家服员 <van-icon name="arrow" /></van-row>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { getCompanys } from '@/api/company'
import { getStaffs } from '@/api/staff'
import Company from '@/api/constant/company'

export default {
  name: 'Home',
  components: {},
  props: {},
  data () {
    return {
      Company,
      companys: [],
      staffs: []
    }
  },
  computed: {},
  watch: {},
  created () {
    this.loadCompanys()
    this.loadStaffs()
  },
  mounted () {},
  methods: {
    async loadCompanys () {
      this.companys = await getCompanys({ _page: 1, _limit: 5 })
    },
    async loadStaffs () {
      this.staffs = await getStaffs({ _page: 1, _limit: 5 })
    }
  }
}
</script>

<style scoped lang="less">
.home-container {
  padding-top: 90px;
  padding-bottom: 100px;
  box-sizing: border-box;
  /**
   * vue组件中, 在style设置为scoped的时候, 里面在写样式对子组件是不生效的,
   * 如果想让某些样式对所以子组件都生效, 可以使用 /deep/ 深度选择器。
   */
  /deep/ .van-nav-bar__title {
    max-width: unset;
  }

  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }

  .my-swipe {
    .van-swipe-item {
      height: 300px;
    }
    .banner01 {
      background: url("~@/assets/banner01.jpg") center/cover;
    }
    .banner02 {
      background: url("~@/assets/banner02.jpg") center/cover;
    }
    .banner03 {
      background: url("~@/assets/banner03.jpg") center/cover;
    }
    .banner04 {
      background: url("~@/assets/banner04.jpg") center/cover;
    }
  }

  .van-grid {
    padding: 30px 0;
  }

  /deep/ .nav {
    margin-bottom: 30px;
    padding: 0;
    .van-grid-item__content {
      padding: 0;
      background-color: transparent;
    }
    [class*='van-hairline']::after {
      border: 0;
    }
    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #fff;
    }
    .text {
      margin: 10px 0;
      font-size: 24px;
    }
  }

  .company-info-wrap {
    .text {
      font-size: 18px;
    }
  }

  .staff-info-wrap {
    margin-top: 20px;
    .text {
      font-size: 18px;
    }
  }
}
</style>
